<template>
	<view class="main">
		<view class="header">
			<u-navbar 
			:is-back="false" 
			title="消息" 
			title-color="#ffffff"
			title-size="34"
			:border-bottom="false"
			:background="background">
				<view class="slot-wrap">
					<u-icon name="search" color="#ffffff" size="28"></u-icon>
					<text @tap="toPage('/pages/Notice/friendsList')">名片夹</text>
				</view>
			</u-navbar>
		</view>
		<view class="content content-top">
			<notice-card 
			:url="'/pages/Notice/systemInfo'"
			:ico="'../../static/image/ico/xtxx.png'" 
			:title="'系统消息'" 
			:time="'2021/06/18'" 
			:des="'灵活用工平台:恭喜!您的实名认证申请已经'"></notice-card>
			<notice-card
			:url="'/pages/Notice/transactionNews'"
			:ico="'../../static/image/ico/jyxx.png'" 
			:title="'交易消息'" 
			:time="'21:00'" 
			:des="'暂无最新消息'"></notice-card>
		</view>
		<view class="content">
			<block v-for="(item,index) in 5" :key="index">
				<u-swipe-action class="swiper-action" :show="show" @click="click" @open="open" :options="options">
					<notice-card
					:url="chaturl"
					ico="" 
					:title="'张小萌'" 
					:time="'21:00'" 
					:des="'申请接单'"></notice-card>
				</u-swipe-action>
			</block>
		</view>
		<view class="sidebar">
			<view class="cont">
				<text>在线</text>
				<text>咨询</text>
			</view>
		</view>
		<Nav></Nav>
	</view>
</template>

<script>
	import Nav from "@/components/Nav.vue"
	import NoticeCard from "@/components/NoticeCard.vue"
	export default {
		components:{
			Nav,
			NoticeCard
		},
		data() {
			return {
				chaturl:'/pages/Notice/hm-chat',
				background: {
					backgroundColor:"#4A90E2"
				},
				show:false,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			let data={value:"首页传输内容",method:"方法名称"}
			this.$socket.send(JSON.stringify(data));
		},
		methods: {
			click(index, index1) {
				console.log('[点击]',index,index1)
			},
			open(index) {
				console.log('[打开事件]',index)
			},
			// 跳转
			toPage(url){
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f9f9f9;
		.header{
			.slot-wrap{
				padding: 0 30rpx;
				flex: 1;
				display: flex;
				justify-content: flex-end;
				text{
					margin-left: 65rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
		}
		.content{
			padding: 0 30rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			
			
			.swiper-action:last-child{
				/deep/.item{
					border-bottom:0;
				}
			}
		}
		.content-top{
			/deep/.notice_card:last-child{
				.item{
					border-bottom: 0;
				}
				
			}
		}
		.sidebar{
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 13rpx 0px rgba(196, 196, 196, 0.5);
			border-radius: 60rpx;
			position: fixed;
			right: 15rpx;
			bottom:15vh;
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				display: block;
			}
		}
	}
	
</style>
